<template>
    <div class="pro">
        <a class="icon icon-left pro-back" v-on:click="back"></a>
        <div class="proImg"><img  v-bind:src="Aproduct.img"></div>
        <!-- {{proInits.imgsrc}} -->
        <div class="content-block-title">
            <div class="product-name" id="divTitle">{{Aproduct.name}}</div>
            <div class="product-price">
                <span>￥{{Aproduct.price}}</span>
                <div class="cp-counter">
                     <a href="javascript:void(0)" v-on:click.stop="minus">-</a>
                     <input type="text" name="" v-bind:value="num">
                     <a href="javascript:void(0)" v-on:click.stop="plus">+</a>
                 </div>
            </div>
            
        </div>
        <div class="list-block pro-list">
            <ul>
              <li class="item-content">
                <div class="item-media"><i class="icon icon-f7"></i></div>
                <div class="item-inner">
                  <div class="item-title">规格</div>
                  <div class="item-after"><button>{{Aproduct.units}}</button></div>
                </div>
              </li>
              <li class="item-content">
                <div class="item-media"><i class="icon icon-f7"></i></div>
                <div class="item-inner">
                  <div class="item-title">产地</div>
                  <div class="item-after">{{Aproduct.place}}</div>
                </div>
              </li>
            </ul>
        </div>
        <!--详情 评论 -->
        <div class="buttons-tab">
            <a href="#tab1" class="tab-link active button">详情</a>
            <a href="#tab2" class="tab-link button">评论</a>
          </div>
          <div class="content-block">
            <div class="tabs">
              <div id="tab1" class="tab active">
                <div class="content-block pro-intrDiv">
                  <!-- <p>This is tab 1 content</p> -->
                  <img class="pro-intr" alt="">
                </div>
              </div>
              <div id="tab2" class="tab">
                <div class="content-block">
                  <!-- <p>This is tab 2 content</p> -->
                  <div class="list-block media-list">
                    <ul>
                      <li>
                          <div class="item-inner">
                            <div class="item-title-row">
                              <div class="item-title"></div>
                            </div>
                            <div class="item-text"></div>
                          </div>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        <div>
              <div class="joinBtn" v-on:click="proSave">加入购物车</div>
        </div>
        <div class="tip" v-show="isTip">{{tipTxt}}</div>
    </div>
    
</template>
<script type="text/javascript">
    // import Header1 from "./header.vue";
    import Swper from "./swper.vue";
    export default {
        data(){
            return{
                Aproduct:[],
                num:1,
                isNull:true,
                isTip:false,
                tipTxt:"成功添加购物车!",
                timer:null,

            }
        },
        components:{
            Swper,
        },
        mounted(){
            $(".cartNone").hide();
            var _this=this;
            var id=localStorage.getItem("proId");
            $.ajax({
                type:"get",
                url:"http://localhost:8088/shop2/getHomeSj.php",
                data:{type:'Aproduct',id:id},
                dataType:"json",
                success:function(data){
                    _this.Aproduct=data;
                }
            });
            // console.log(this.);
            
        },
        methods:{
            back:function(){
                history.back();
            },
            proSave:function(){
                if(getCookie().userName==true){
                    var _this=this;
                    clearTimeout(this.timer); 
                     this.isTip=true;
                    var proObj={id:this.Aproduct["id"],img:this.Aproduct["img"],name:this.Aproduct["name"],price:this.Aproduct["price"],num:this.num,units:this.Aproduct["units"]};
                    var arr=JSON.parse(localStorage.getItem("shopCart"))||[];
                    for (var i = 0; i < arr.length; i++) {
                        if(this.Aproduct["name"]==arr[i]["name"]){
                            this.tipTxt="购物车已存在!";
                            break;
                        }
                    }
                    if(i==arr.length){
                        arr.push(proObj);
                         this.tipTxt="成功添加购物车!";
                    }
                    this.timer=setTimeout(function(){
                         _this.isTip=false;
                    },2000);
                    var str=JSON.stringify(arr);
                    localStorage.setItem("shopCart",str);
                 }else{
                    // js控制路由跳转
                    this.$router.push("/login");
                 }
            },
            changeNum:function(num){
                this.num=num;
            },
            minus:function(){
                if(this.num==1){ return}
                this.num--;
            },
            plus:function(){
                this.num++;
            },
        },

    }
        
</script>

<style type="text/css">
/*tip*/
.tip{
    display: inline-block;
    background-color: rgba(0,0,0,0.7);
    padding:.2rem 1rem;
    font-size: 0.6rem;
    border-radius: 1rem;
    position: fixed;
    left: 50%;top: 50%;
    transform: translateX(-50%) translateY(-50%);
    color: white;
}
.pro{
    background: white;
}
.proImg{
    text-align: center;
}
.proImg img{
    padding-top: 2rem;
    width: 30%;
}
.product-name{
    font-size: 0.75rem;
    color: #333;
    padding-bottom: 0.8rem;
}
.product-price span{
    display: inline-block;
    color: #fb3d3d;
    font-size: 0.8rem;
    padding-bottom: 0.5rem;
    position: relative;
}
    .pro-back{
        width: 35px;height:35px;
        border: 1px solid #e5e1e2;
        border-radius: 50%;
        text-align: center;
        line-height: 35px;
        font-weight: bold;
        color: #0fb37b;
        position: absolute;
        z-index: 2;
        top: 10px;left: 10px;
    }
    .pro-list{
        font-size: 0.7rem;
        color: #999999;
    }
    .joinBtn{
        width: 100%;
        position: fixed;
        bottom: 0px;
        left: 0;
        margin: 0 auto;
        background: #fb3d3d;
        line-height: 50px;
        text-align: center;
        color: white;
    }
    .pro-counter{
        position: absolute;
        right: 5px;
        z-index: 10;
        top: 0px;
    }
    .pro-intrDiv{
        padding:0;
    }
    .pro-intr{
        width: 100%;
    }
    /*counter*/
    .cp-counter{
        display: inline-block;
        border: 1px solid #a3a2a2;
        border-radius: 5px;
        position: absolute;
        right: 2%;
        top: 1.5rem;
    }
    .cp-counter a{
        padding: 8px;
        color: #666;
        float: none!important;
    }
    .cp-counter input{
        width: 30px;
        height: 23px;
        text-align: center;
        border: none;
        border-left: 1px solid #a3a2a2;
        border-right: 1px solid #a3a2a2;
    }
</style>
